1.1.1. 2.4.5 横向并排：三个相同的 item 两端对齐

1）用 float
html 文件

<div class="feel">  
  <div class="title">  
    <h3>对本页内容的感受如何？</h3>  
  </div>  
  <div class="select">  
    <div class="item1">  
      <div class="bor1">  
        <span class="emoji">😁</span>  
        <span class="word">So Easy</span>  
      </div>  
    </div>  
    <div class="item2">  
      <div class="bor2">  
        <span class="emoji">😑</span>  
        <span class="word">还 OK</span>  
      </div>  
    </div>  
    <div class="item3">  
      <div class="bor3">  
        <span class="emoji">😭</span>  
        <span class="word">奔溃了</span>  
      </div>  
    </div>  
  </div>  
</div>

scss 文件

.feel {  
  padding: 10px 5px 70px;  
  border-bottom: 2px solid #dedede; //下划线  
  .select {  
    padding: 30px 5px;  
  .item1, .item2, .item3 {  
      float: left; //并排  
  width: 33.33%; //宽度平分  
  .emoji {  
        font-size: 2em;  
  vertical-align: middle;  
  }  
      .word {  
        font-size: 16px;  
  vertical-align: middle;  
  }  
    }  
    .bor1, .bor2, .bor3 {  
      text-align: center;  
  width: 120px;  
  &:hover {  
        border: 2px solid #31dae2; //线改为2px会有向下动的动作效果  
  }  
    }  
    .bor2 {  
      margin: 0 auto; //margin实现：居中  
  }  
    .bor3 {  
      margin-left: auto; //margin实现：右对齐  
  }  
  }  
}

2）推荐：用 display: -webkit-flex; 和 -webkit-justify-content: space-between; 让三个表情并排并两侧居中。
html 文件

<div class="aaa">  
  <div class="title">  
    <h3>对本页内容的感受如何？</h3>  
  </div>  
  <div class="select">  
    <div class="item1">  
      <div class="bor1">  
        <span class="emoji">😁</span>  
        <span class="word">So Easy</span>  
      </div>  
    </div>  
    <div class="item2">  
      <div class="bor2">  
        <span class="emoji">😑</span>  
        <span class="word">还 OK</span>  
      </div>  
    </div>  
    <div class="item3">  
      <div class="bor3">  
        <span class="emoji">😭</span>  
        <span class="word">奔溃了</span>  
      </div>  
    </div>  
  </div>  
</div>

scss 文件

.aaa {  
  padding: 10px 5px 20px;  
  border-bottom: 2px solid #dedede; //下划线  
  .select {  
    display: -webkit-flex; //并排  
  -webkit-justify-content: space-between; //两侧对齐  
  padding: 30px 5px;  
  .item1, .item2, .item3 {  
      .emoji {  
        font-size: 2em;  
  vertical-align: middle;  
  }  
      .word {  
        font-size: 16px;  
  vertical-align: middle;  
  }  
    }  
    .bor1, .bor2, .bor3 {  
      text-align: center;  
  background-color: #1ab5bc;  
  width: 120px;  
  &:hover {  
        border: 2px solid #31dae2; //线改为2px会有向下动的动作效果  
  }  
    }  
  }  
}